<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <!-- <title>{{$title}}</title> -->
    <link rel="stylesheet" href="./public/css/bootstrap.min.css">
    <link rel="stylesheet" href="./public/reset.css">
    <script src="./public/js/jquery-1.8.3.min.js"></script>
    
</head>
<body>
    <div class="container">
        <h1>用户列表</h1>
        <div class="center-block mt20">
            <a href="./index.php?c=User&a=index" class="btn btn-info">首页</a>
            <a href="./index.php?c=User&a=add" class="btn btn-success">添加</a>
        </div>
         
            <div id="box">
               
            </div>
    </div>
    <script>

        // $(function (){
        //     $.get('./p/select.php', function(data){
        //         for (var i = 0; i < data.length; i++) {

        //             $('<td>').html(data[i].id).appendTo('#box');  
        //             $('<td>').html(data[i].name).appendTo('#box');  
        //             $('<td>').html(data[i].sex).appendTo('#box');  
        //             $("#td_age").html(data[i].age).appendTo('#box'); 
        //             $("#td_province").html(data[i].province).appendTo('#box'); 
        //             $('<tr>').html(data[i].name);
        //         }
        //     }, 'json');
        // });
        loadHtml();
        function loadHtml() {
            // 创建对象
            var xhr = new XMLHttpRequest();
            
            // 事件回调 xhr
            xhr.onreadystatechange = function (){
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 清空原先的数据
                    box.innerHTML = '';
                    // 获取响应结果
                    // var obj = eval('('+xhr.responseText+')');
                    var obj = JSON.parse(xhr.responseText);
                    console.log(obj);
                    // 把数据遍历在表格中
                    var table = document.createElement('table');
                    table.width = 800;
                    table.border = 1;
                    table.cellPadding = 5;
                    table.cellSpacing = 0;
                    table.id = 'table';
                    console.log(table);
                    box.appendChild(table);

                    // 添加表头
                    var tr = table.insertRow(0);
                    addTH(tr, ['ID','NAME','SEX','AGE','PROVINCE']);

                    // 遍历表格数据
                    for (var i = 0; i < obj.length; i++) {
                        var tr = table.insertRow(i+1);
                        tr.insertCell(0).innerHTML = obj[i].id;
                        tr.insertCell(1).innerHTML = obj[i].name;
                        tr.insertCell(2).innerHTML = obj[i].sex;
                        tr.insertCell(3).innerHTML = obj[i].age;
                        tr.insertCell(4).innerHTML = obj[i].province;
                    }
                }
            }
            
            // 请求的初始化
            xhr.open('get', './p/select.php', true);
            // 正式发送请求
            xhr.send();
        }


        function addTH(tr, data){
            for (var i = 0; i < data.length; i++) {
                var th = document.createElement('th');
                th.innerHTML = data[i];
                tr.appendChild(th);
            }
        }
    </script>

    <!-- <script src="./public/js/jquery.min.js"></script> -->
    <!-- <script src="./public/js/bootstrap.min.js"></script> -->
</body>
</html>